<template>
	<view>
		<navbar :scrollTop="scrollY" :isLove="isLove" @collect="toCollect"></navbar>
		<VerticalDanmu :messages="message">
			<!-- 轮播 -->
			<productBg :images="detailData.image?detailData.image.split(','):[]" :isUp="detailData.isUp"
				@initImg="initImg" :code="detailData.id" :updateTime="detailData.updateTime" @catImg="catImg">
			</productBg>
		</VerticalDanmu>
		<!-- 标题 区域 -->
		<view class="product-info mb-24">
			<view class="acea-row row-middle row-between title-box">
				<view class="title">
					<view class="title-text-i">{{detailData.name}}</view>
				</view>
				<view class="acea-row row-middle row-between share-btns">
					<button open-type="share">
						<image src="../static/images/wechat_icon.png" mode=""></image>
						<view style="font-size: 23rpx;">微信</view>
					</button>
				</view>
				<view class="acea-row brand-types">
					<view v-for="item in detailData.keyword?detailData.keyword.split('/'):[]" :key="item">{{item}}</view>
				</view>
			</view>
			
			<view class="brand-class">
				<view class="acea-row row-middle row-between pd-t-b-24 border-b">
					<view class="acea-row row-middle w-48">
						<view class="label">商品名称</view>
						<view class="text">{{ detailData.name || '' }}</view>
					</view>
					<view class="acea-row row-middle w-48">
						<view class="label">商品价格</view>
						<view class="text">{{ detailData.price || 0 }} <text>元</text></view>
					</view>
					<view class="acea-row row-middle w-48" style="margin-top: 15rpx ;">
						<view class="label">商品数量</view>
						<view class="text">{{ detailData.productNum || 0 }}</view>
					</view>
					<view class="acea-row row-middle " style="margin-top: 15rpx;width: 100% ;">
						<view class="label">描述</view>
						<view class="text">{{ detailData.content || '' }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="module-box white-bg mb-24">
			<!-- 经营特色 -->
<!-- 			<view class="supplement pd-t-b-24">
				<view class="module-title">特色标签</view>
				<view class="text pd-t-b-24">
					{{detailData.keyword}}
				</view>
			</view> -->
			<!-- 联系人 -->
			<contacts-list :list="detailData.contacts"></contacts-list>
		</view>

		<detail-footer :contact="detailData" @toPhone="toPhone" @toCollect="toCollect"
			:info="detailData"></detail-footer>
		<!-- <report :link-id="detailData.id" :types="5" ref="report" /> -->
	</view>
</template>

<script>
	import navbar from '../components/navbar/navbar.vue'
	import productBg from '../components/productBg/productBg.vue'
	import detailNav from '../components/detailNav/detailNav.vue'
	import detailFooter from '../components/footer/footer.vue'
	import contactsList from '../components/contactsList/contactsList.vue'
	import recommend from '../components/recommend/recommend.vue'
	import suppleRecommend from '../components/recommend/suppleRecommend.vue'
	import report from "@/pages/details/components/goods_report/report.vue"
	import VerticalDanmu from '@/pages/details/components/VerticalDanmu/index.vue'
	import {
		getSuppleDetail,
		getRecommendList
	} from '@/api/api.js'
	export default {
		components: {
			navbar,
			productBg,
			detailNav,
			detailFooter,
			contactsList,
			recommend,
			suppleRecommend,
			report,
			VerticalDanmu
		},
		data() {
			return {
				scrollY: 0,
				scrollTop: 0,
				isLove: false,
				detailTabnav: [{
					name: '供应链',
					type: '1',
					num: 2
				}],
				detailData: {},
				height: 0,
				opacity: 0,
				goodsTabOn: 0,
				goodsTab: ['为你推荐', '附近推荐'],
				goodsList: [1, 2],
				visitInfo: [1, 2, 3, 4, 5, 6, 7, 8, 9, 8],
				dataList: {},
				images: [],
				mind: 0,
				videos: [],
				nearList: [], //附近推荐
				nearPage: 1,
				nearTotalPage: 1,
				loading: true,
				message: [],
				loadTitle: '我也是有底线的',
				id: 0,
				nearbyList: [],
				communicationRandom: (Math.floor(Math.random() * (500 - 50 + 1)) + 50),
				rewardTitle: '',
				shareInfo: { //用于分享
					title: "",
					infoId: "",
					shareId: "",
					infoType: 4,
					isInitStatus: 0
				},
				detailInfo: { //用于添加浏览记录
					type: '',
					st: '',
					storeCategory: ''
				},
				bhv: []
			};
		},
		onLoad(options) {
			let that = this;
			if (!options.data) return uni.navigateBack()
			this.detailData = JSON.parse(options.data)

			this.contactList = this.detailData.contacts
			if (this.isReward == 1) {
				this.shareInfo.title = this.rewardTitle;
			} else {
				this.shareInfo.title = this.detailData.name;
			}
		},
		methods: {
			scroll: function(e) {
				var that = this,
					scrollY = e.detail.scrollTop;
				var opacity = scrollY / 200;
				opacity = opacity > 1 ? 1 : opacity;
				that.$set(that, 'opacity', opacity);
				that.$set(that, 'scrollY', scrollY);
			},
			toReport() {
				this.$refs.report.open();
			},
			toReport() {
				this.$refs.report.open();
			},
			toPhone() {
				if (this.bhv.length < 1 || this.bhv.indexOf(2) == -1) {
					this.bhv.push(2)
				}
				//console.log(this.bhv)
			},
			catImg() {
				if (this.bhv.length < 1 || this.bhv.indexOf(4) == -1) {
					this.bhv.push(4)
				}
			},
			toCollect() {
				if (this.bhv.length < 1 || this.bhv.indexOf(3) == -1) {
					this.bhv.push(3)
				}

			},
			getDetail(id) {
				let params = {
					...this.$location
				}
				getSuppleDetail(id, params).then(res => {
					console.log(res)
					if (res.code == 200) {
						res.data.imaegs = res.data.imaegs ? res.data.imaegs.split(',') : this.$noImageShow;
						res.data.advantageIds = res.data.serviceCharacteristics ? (res.data.serviceCharacteristics
							.split(',')) : []
						let c = this.itemList ? this.itemList.filter(item => item.id == res.data.category) : [];
						res.data.categoryName = c[0] ? c[0].name : '';
						// res.data.categoryName = [0]
						// res.data.contacts = res.data.contacts.map(item => ({
						// 	...item,
						// 	username: item.contactName,
						// 	phone: item.contactPhone
						// }))
						this.contactList = res.data.contacts
						// res.data.imaegs.forEach(item => {
						// 	const len = item.length;
						// 	const type = item.substring(len - 3, len);
						// 	['jpg', 'png'].includes(type) ? this.images.push(item) : this.videos.push(
						// 		item);
						// })
						console.log(this.images, this.videos)

						this.detailData = res.data
						// this.detailData.vistype = 4;
						// this.existsIsLove(this.detailData.id)
						this.shareInfo.infoId = this.detailData.id;
						if (this.detailData.managementResponse) {
							this.detailData.managementResponse.forEach(item => {
								this.message.push({
									content: (item.nickname ? item.nickname : '匿名') + '查看了店铺',
									avatar: item.avatar
								})
							})
						}
						if (this.isReward == 1) {
							this.shareInfo.title = this.rewardTitle;
						} else {
							this.shareInfo.title = this.detailData.title;
						}
						this.shareInfo.isInitStatus = 1;
						console.log(this.detailData)
					}
				})
			},
			toLocation() {
				let that = this;
				uni.openLocation({
					latitude: parseFloat(that.detailData.latitude),
					longitude: parseFloat(that.detailData.longitude),
					success: function() {
						console.log('success');
					}
				});
			},
			kmUnit(m) {
				var v;
				m = Number(m)
				if (typeof m === 'number' && !isNaN(m)) {
					if (m > 1) {
						v = m.toFixed(2) + 'km'
					} else {
						v = (m * 1000).toFixed(2) + 'm'
					}
				} else {
					v = '0m'
				}
				return v;
			},
			toVisitor() {
				uni.navigateTo({
					url: "/pages/aboutUsers/aboutUsers/visitor?mind=" + this.mind + "&data=" + JSON.stringify(
						this.detailData)
				})
			},
			initImg() {

			},
			toCollect(status) {
				let that = this;
				let d = {
					status,
					type: 4,
					id: that.detailData.id
				}
				if (status) {
					d.title = that.detailData.title
				}
				getApp().globalData.toCollect(d, (res) => {
					that.existsIsLove(res.id);
				})
			},
			existsIsLove(id) {
				let that = this;
				getApp().globalData.existsIsLove({
					id,
					type: 4
				}).then(res => {
					console.log('appExistsLove', res)
					that.isLove = res;
				})
			},
			//切换推荐栏
			changeRecommed(index) {
				this.goodsTabOn = index;
				this.loading = false;
				this.nearPage = 1;

				this.getNearList()
			},
			//附近推荐
			async getNearList() {
				console.log('fujin....')
				console.log()
				if (this.nearPage == 1) {
					this.nearbyList = []
				}

				let parmas = {
					limit: 4,
					page: this.nearPage,
					city: this.$city
				}
				if (this.goodsTabOn == 1) {
					parmas = {
						...parmas,
						...this.$location
					}
				}
				try {
					let {
						data
					} = await getRecommendList(parmas);
					let d = [...this.nearbyList, ...data.list];
					this.nearbyList = d.filter(item => item.id != this.curId && item.id != this.id)
					console.log('jigweidu=', this.nearbyList)
					this.totalNearPage = data.totalPage;
					this.loading = true;
					if (this.nearPage == data.totalPage && this.nearbyList.length > 0) this.loadTitle = '我也是有底线的'
					else if (this.nearPage < data.totalPage && this.nearbyList.length > 0) this.loadTitle = '加载更多'
					else this.loadTitle = '暂无数据'
				} catch (e) {
					//TODO handle the exception
				}
			},
			//触底
			lower() {
				if (this.goodsTabOn != 1 || this.nearTotalPage <= this.nearPage) return
				this.loading = false
				this.nearPage += 1;
				this.getNearList()
			},
			onReachBottom() {
				this.nearPage++;
				this.getNearList()
			}
		}
	}
</script>

<style lang="scss">
	@import "../static/css/index.scss";
</style>